<template>
  <div class="block mb-2">
    <div class="text-center mod-title">{{ title }}</div>
    <div class="flex justify-center mod-num-value">
      <NumberAnimation :nid="nid" :numm="num" :numLen="num.toString().length"></NumberAnimation>
    </div>
    <div class="mod-text text-center" v-if="bottomNumShow">
      商品数
      <span>{{ bottomNum }}</span>
      条
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import NumberAnimation from './NumberAnimation.vue'
  export default defineComponent({
    name: 'Mod1',
    components: { NumberAnimation },
    props: {
      nid: {
        required: true,
        type: String,
        default: 'id_0_',
      },
      title: {
        required: true,
        type: String,
        default: '',
      },
      num: {
        type: Number,
        default: 100,
      },
      bottomNumShow: {
        type: Boolean,
        default: false,
      },
      bottomNum: {
        type: [String,Number],
        default: '123',
      },
    },
    setup() {

    },
  })
</script>

<style lang="scss">
  .mod-title {
    color: #43a2fe;
    font-size: 18px;
    font-weight: 700;
  }
  .mod-num-value {
    background-image: url(./bj.png);
    background-position: bottom;
    padding: 20px 0 35px 0;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .mod-text {
    color: #aaafc2;
    span {
      color: #fff;
      font-size: 20px;
      font-weight: 800;
    }
  }
</style>
